<!--模板-->
<template>
  <!--最外层-->
  <div class="left-panel">

    <!--上部-->
    <div class="top-panel">
      <dv-border-box12 background-color="rgb(1, 50, 32)">
        <div class="top-content">
          <div class="title">
            <dv-decoration-8 style="width:120px;height:30px;" />
            <div style="font-weight: bold">智慧大棚设备列表</div>
            <dv-decoration-8 :reverse="true" style="width:120px;height:30px;" />
          </div>
          <div class="device-charts">
            <dv-scroll-board :config="inputDevicesConfig" style="height:100px; width:400px" />
          </div>
        </div>
      </dv-border-box12>
    </div>
    <!--中部-->
    <div class="mid-panel">
      <dv-border-box13 background-color="rgb(1, 50, 32)">
        <div class="mid-content">
          <div class="title">
            <dv-decoration-8  style="width:130px;height:30px;" />
            <div style="font-weight: bold">天气预告</div>
            <dv-decoration-8 :reverse="true" style="width:130px;height:30px;" />
          </div>
          <div class="under-title-2">
            <dv-border-box12>
              <iframe width="400" scrolling="no" height="100" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=9&color=%23FFFFFF&bgc=%23&bdc=%23&icon=1&py=chenggong&site=12"></iframe>
            </dv-border-box12>
          </div>
        </div>
      </dv-border-box13>
    </div>
    <!--下部-->
    <div class="bottom-panel">
      <dv-border-box13 background-color="rgb(1, 50, 32)">
        <div class="content">
          <div class="title">
            <dv-decoration-8 style="width:120px;height:30px;" />
            <div style="font-weight: bold">温度监测数据统计</div>
            <dv-decoration-8 :reverse="true" style="width:120px;height:30px;" />
          </div>
          <div class="under-title">
            <dv-border-box10  background-color="rgb(1, 50, 32)" >
              <div class="line-container">
                <div class="line-chart" ref="lineContainer"></div>
                <!--                <div>{{inputLineChart}}</div>-->
              </div>
            </dv-border-box10>
          </div>
        </div>
      </dv-border-box13>
    </div>


  </div>

</template>

<!--样式-->
<style scoped>
.left-panel {
    display: flex;                /* 设置为 Flexbox 布局 */
    flex-direction: column;        /* 子元素垂直排列 */
    height: 100%;                  /* 父容器高度为 100%（占满父元素） */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 5px;

  }


.top-panel{
  flex: 1;
  display: flex;                 /* 可选：为了让内部内容居中 */
  flex-direction: column;
  box-sizing: border-box;
}
.mid-panel {
  flex: 1;                       /* 使每个子元素占据相同的高度 */
  display: flex;                 /* 可选：为了让内部内容居中 */
  align-items: center;           /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  padding-top:5px;
  box-sizing: border-box;
}
.bottom-panel {
    flex: 3;                       /* 使每个子元素占据相同的高度 */
    display: flex;                 /* 可选：为了让内部内容居中 */
    align-items: center;           /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  box-sizing: border-box;
}

.content {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  width: 100%; /* 让 content 宽度撑满父容器 */
  height: 100%; /* 让 content 高度撑满父容器 */
  padding: 10px; /* 设置 content 的内边距 */
  box-sizing: border-box; /* 确保 padding 不会影响整体布局 */
  max-width: 100%;
}
.top-content {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%;
  width: 100%; /* 让 content 宽度撑满父容器 */
  padding: 15px; /* 设置 content 的内边距 */
  padding-top: 5px;
  box-sizing: border-box; /* 确保 padding 不会影响整体布局 */
}
.mid-content {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%;
  width: 100%; /* 让 content 宽度撑满父容器 */
  padding: 10px; /* 设置 content 的内边距 */
  box-sizing: border-box; /* 确保 padding 不会影响整体布局 */
}
.device-charts{
  flex: 1;
  width: 100%;
  height: 100%;
}
/* title 占满 content 宽度，位于上部 */
.title {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 让三个元素分布在两侧，居中间隔 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 宽度撑满父容器 */
  max-width: 100%;
  box-sizing: border-box;
}

/* under-title 占据 content 剩余的空间 */
.under-title {
  display: flex; /* 使用 flex 布局 */
  flex: 1; /* 占满剩余空间 */
  justify-content: space-between; /* 让两个 dashboard 平分空间 */
  gap:3px; /* 添加间距，确保两个 dashboard 之间有一定的空隙 */
  padding: 5px;
  max-width: 100%;
  box-sizing: border-box;
}
.under-title-2 {
  display: flex; /* 使用 flex 布局 */
  flex: 1; /* 占满剩余空间 */
  justify-content: space-between; /* 让两个 dashboard 平分空间 */
  gap: 3px; /* 添加间距，确保两个 dashboard 之间有一定的空隙 */
}

.line-container {
  display: flex;
  width: 100%;
  height: 100%;
  padding:  8px;
  box-sizing: border-box;
}
.line-chart {
  width: 100%;
  height: 100%;
}

</style>







<!--行为-->
<script>
import * as echarts from 'echarts';

export default {

  props: {
    inputDevicesConfig: {
      type: Object,
      required: true
    },
    inputGreenhouseData: {
      type: Object,
      required: true
    },
    inputLineChart:{}
  },
  data() {
    return {
      lineChart: null, // 存储折线图实例
      temperatureValue: this.inputGreenhouseData["空气温度"]/10, // 初始温度
      humidityValue: this.inputGreenhouseData["空气相对湿度"]/10, // 初始湿度
    };
  },
  mounted() {
    const lineDom = this.$refs.lineContainer;
    this.lineChart = echarts.init(lineDom);
    this.setLineChart();
    this.updateChartData();
    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', this.handleResize);
    setInterval(this.updateChartData, 2000);

  },
  beforeDestroy() {
    // 销毁ECharts实例
    if (this.lineChart) this.lineChart.dispose();

    // 清除resize事件监听
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {

    // 设置折线图
    setLineChart() {
      const lineOption = {
        backgroundColor: { // 背景颜色设置为线性渐变
        type: 'linear', // 线性渐变
        x: 0, // 渐变起点 (左侧)
        y: 0, // 渐变起点 (顶部)
        x2: 0, // 渐变终点 (右侧)
        y2: 1, // 渐变终点 (底部)
        colorStops: [
            { offset: 0, color: '#4b6cb7' }, // 渐变起始颜色（蓝色）
            { offset: 1, color: '#182848' }  // 渐变结束颜色（深蓝色）
        ]
        },
        tooltip: {
          trigger: 'axis', // 鼠标悬浮显示提示框
          axisPointer: {
            type: 'cross', // 使tooltip跨越多个系列
            crossStyle: {
              color: 'rgba(173, 216, 230, 1)'
            }
          },
          textStyle: {
            color: '#fff' // 提示框文字改为白色
          },
          backgroundColor: 'rgba(173, 216, 230, 1)', // 浅蓝色背景，使用RGBA颜色值
          borderColor: '#87cefa', // 边框颜色设置为浅蓝色
          borderWidth: 1
        },
        legend: {
          data: ['气温', '土壤温度'], // 图例展示气温和土壤温度
          left: 'right',
          top: 'top',
          itemHeight: 8,
          itemWidth: 16,
          textStyle: {
            color: '#fff' // 图例文字改为白色
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true, // 不留白
          data: [],
          axisLine: {
            lineStyle: {
              color: 'rgba(173, 216, 230, 1)'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: '温度（°C）',
          axisLine: {
            lineStyle: {
              color: 'rgba(173, 216, 230, 1)'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          splitLine: {
            show: false, // 取消水平分割线
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: '气温',
            type: 'line',
            data: [], // 假设气温数据
            color: '#ff7f50',
            smooth: true,
            label: {
              show: true,
              position: 'top', // 数据标签显示在节点上方
              color: '#ff7f50', // 标签颜色与折线一致
              fontSize: 12
            },
            itemStyle: {
              color: '#ff7f50'
            },
            lineStyle: {
              width: 2
            },
            symbol: 'circle', // 数据点的形状
            symbolSize: 6 // 数据点的大小
          },

          {
            name: '土壤温度',
            type: 'line',
            data: [],
            color: '#87cefa',
            smooth: true,
            label: {
              show: true,
              position: 'top', // 数据标签显示在节点上方
              color: '#87cefa', // 标签颜色与折线一致
              fontSize: 12
            },
            itemStyle: {
              color: '#87cefa'
            },
            lineStyle: {
              width: 2
            },
            symbol: 'circle', // 数据点的形状
            symbolSize: 6 // 数据点的大小
          },
        ]
      };
      this.lineChart.setOption(lineOption);
    },
    // 更新折线图数据的方法
    updateChartData() {
      const airTemperatures = this.inputLineChart["airTemperatures"];
      const soilTemperatures = this.inputLineChart["soilTemperatures"];
      const dates=this.inputLineChart["dates"];
      const option = this.lineChart.getOption();
      option.xAxis[0].data= dates;
      option.series[0].data = airTemperatures;
      option.series[1].data = soilTemperatures;
      this.lineChart.setOption(option);
    },
    // 响应resize事件
    handleResize() {
      this.lineChart.resize();
    }

  },
};

</script>
